<template>
  <div class="admin-manage-page">
    <!-- 查询表单区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="search-form"
      style="margin-bottom: 16px;"
    >
      <el-form-item label="用户名">
        <el-input
          v-model="searchForm.username"
          placeholder="用户名"
          clearable
          prefix-icon="el-icon-user"
          style="width: 180px;"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" style="margin-bottom: 16px;">
      <el-col>
        <el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col>
        <el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格区域 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="index" label="索引" width="60" align="center" />
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column prop="password" label="密码" align="center" />
      <el-table-column prop="role" label="角色" align="center" />
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button
            type="primary"
            icon="el-icon-view"
            size="mini"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="handleEdit(scope.row)"
          >修改</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleRowDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 16px; text-align: center;"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 按需引入 Element Plus 图标
import { 
  User,
  Search,
  Plus,
  Delete,
  View,
  Edit 
} from '@element-plus/icons-vue'

// 查询表单数据
const searchForm = ref({
  username: ''
})

// 表格数据（模拟，可根据实际接口返回调整）
const tableData = ref([
  {
    index: 1,
    username: 'admin',
    password: 'admin',
    role: '管理员'
  }
])

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(1) // 模拟共1条数据

// 选中的数据（用于批量删除）
const selectedRows = ref([])

// 查询按钮事件
const handleSearch = () => {
  console.log('查询条件：', searchForm.value)
  // 实际开发中，这里可调用接口，根据 searchForm 的值获取表格数据并赋值给 tableData
}

// 新增按钮事件
const handleAdd = () => {
  // 实际开发中，可跳转至新增页面，例如：router.push('/admin-manage/add')
  console.log('点击新增按钮')
}

// 删除按钮事件（批量删除）
const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    return ElMessage.warning('请选择要删除的数据')
  }
  console.log('待删除数据：', selectedRows.value)
  // 实际开发中，调用接口删除选中数据，删除成功后再更新 tableData
}

// 表格多选事件
const handleSelectionChange = (val) => {
  selectedRows.value = val
}

// 行操作 - 详情
const handleDetail = (row) => {
  console.log('详情数据：', row)
  // 实际开发中，可跳转至详情页面，例如：router.push(`/admin-manage/detail/${row.index}`)
}

// 行操作 - 修改
const handleEdit = (row) => {
  console.log('修改数据：', row)
  // 实际开发中，可跳转至编辑页面，例如：router.push(`/admin-manage/edit/${row.index}`)
}

// 行操作 - 删除（单行）
const handleRowDelete = (row) => {
  console.log('删除单行数据：', row)
  // 实际开发中，调用接口删除单行数据，删除成功后再更新 tableData
  tableData.value = tableData.value.filter(item => item.index !== row.index)
  total.value = tableData.value.length // 更新总条数
}

// 分页 - 每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val
  // 实际开发中，调用接口获取对应条数的数据
  console.log('每页条数改变为：', val)
}

// 分页 - 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  // 实际开发中，调用接口获取对应页的数据
  console.log('当前页改变为：', val)
}
</script>

<style scoped>
/* 页面容器样式 */
.admin-manage-page {
  padding: 20px;
}

/* 表格样式优化 */
.el-table th {
  background-color: #4CAF50;
  color: #fff;
}

/* 搜索表单间距调整 */
.search-form {
  display: flex;
  align-items: center;
}

/* 按钮样式微调（保持和截图风格统一） */
.el-button--success {
  background-color: #4CAF50;
  border-color: #4CAF50;
}
.el-button--success:hover {
  background-color: #45a049;
  border-color: #45a049;
}
.el-button--warning {
  background-color: #ff9800;
  border-color: #ff9800;
}
.el-button--warning:hover {
  background-color: #f57c00;
  border-color: #f57c00;
}
.el-button--danger {
  background-color: #f44336;
  border-color: #f44336;
}
.el-button--danger:hover {
  background-color: #e53935;
  border-color: #e53935;
}
</style>